<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .title {
      width: 400px;
      background-color: #ddd;
    }
    .title div {
      line-height: 35px;
      width: 50px;
      background-color: white;
      border-top: orange 2px solid;
      text-align: center;
    }
    .content li {
      margin-left: 20px;
      margin-top: 6px;
      list-style: none;
    }
    .content li a {
      text-decoration: none;
      color: #555;
    }
    .content li a:hover {
      text-decoration: underline;
    }
    .content img {
      margin-right: 10px;
    }

    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="title">
      <div class="title1">
        新闻
      </div>
    </div>
    <div class="content">
      <ul>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
        <li><a href="#"><img src="images/img.gif" alt="">点赞新农人，温暖伸手</a></li>
      </ul>
    </div>
  
    去除列表前面小点<br>
    去除并恢复链接默认样式:下划线，蓝色字体<br>
    img是行内块元素，可以设置外边距
  </body>
</html>
